<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <script>
    	if(localStorage.getItem("language") == "zh_cn"){
    		document.write("<script type='text/javascript' src='js/zh_cn.js'><\/script>");
    	}else if(localStorage.getItem("language") == "zh_tw"){
    		document.write("<script type='text/javascript' src='js/zh_tw.js'><\/script>");
    	}else{
    		document.write("<script type='text/javascript' src='js/en.js'><\/script>");
    	}
    </script>
    <!-- <link rel="stylesheet" type="text/css" href="demo.css"> -->
    <link rel="stylesheet" type="text/css" href="zTreeStyle.css">
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.ztree.core.js"></script>
    <style type="text/css">
    	.k-overlay{
    		position: fixed;
		    top: 0;
		    left: 0;
		    z-index: 100;
		    width: 100%;
		    height: 100%;
		    background-color: #000;
		    filter: alpha(opacity=50);
		    display: none;
		    opacity: 0.5;
		}
		.content{
		    display: none;
		    justify-content: center;
		    width: 100%;
		    height: 100%;
		    position: fixed;
		    top: 0;
		    left: 0;
		    align-items: center;
		    z-index: 102
		}
		.content table{border: 1px solid #ccc;border-radius: 4px;background: #fff;}
		.content table tr{line-height: 50px;}
		.content table tr td{text-align: left;border: 0px;margin-left: 10px;padding: 0px 20px;}
		.content input{padding: 5px;margin: 0px 0px 0px 0px;border-radius: 4px;border:1px solid #ccc;}
		.content thead tr td{border-bottom: 1px solid #ccc;}
		#tree{
			width: 200px;position: absolute;right: 20px;border: 1px solid #ccc;margin-top: 20px;
		}
		button{min-width: 64px;line-height: 20px;margin: 2px 10px;border-radius: 4px;color: #333;border: 1px solid #ccc;background-color: #fff;cursor: pointer;padding: 2px 7px 2px;color: #fff;background-color: #337ab7;border-color: #2e6da4;}
		#treeDemo{margin-top: 22px;}
		#details{display: flex;align-items: center;
		    justify-content: center;}
		#details table{font-size: 12px;border: 1px solid #ccc;}
		#details table tbody td{font-size: 12px;text-align: center;}
		#details table td{padding: 0px 20px;}
		#details table tbody tr{height: 30px;}
		#details table{width: 100%;padding: 0px;margin:0px;border-spacing:0px;border: 1px solid #ccc;border-radius: 4px;}
		#details table th,table td{text-align: center;border: 1px solid #ccc;}
		#details table tr:nth-child(even){
			background: #f5f5f5;
		}
		#details thead tr{height: 30px;}
    </style>
    <script type="text/javascript">
		var setting = {	};
		var zNodes =[
			{ name:"香港", open:true,
				children: [
					{ name:"九龙区",open:true,
						children: [
							{ name:"场所A"},
							{ name:"场所B"},
							{ name:"场所C"}
						]},
					{ name:"旺角区",open:true,
					        children: [
							{ name:"场所A"},
							{ name:"场所B"},
							{ name:"场所C"}
						]},
					{ name:"西贡区",open:true,
                            children: [
							{ name:"场所A"},
							{ name:"场所B"},
							{ name:"场所C"}
						]},
					{ name:"油尖旺区",open:true,
                           children: [
							{ name:"场所A"},
							{ name:"场所B"},
							{ name:"场所C"}
						]},
					{ name:"深水埗区",open:true,
				           children: [
							{ name:"场所A"},
							{ name:"场所B"},
							{ name:"场所C"}
						   ]}
				]}
		];
    $(function(){
    	$("#details").css("width",$("html").width()-250+"px")
    	$("#tree").css("min-height",$("html").height()-150+"px")
    	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })
    function add(){
    	$(".k-overlay,.content").css("display","flex");
    }
    function save(){
    	zNodes[0].children[0].children.push({ name:"场所"+Math.floor(Math.random()*100),open:true});
    	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
    	$(".k-overlay,.content").css("display","flex");
    }
    </script>
</head>
<body>
	<div id="tree">
		<!-- <button style="float: right;" onclick="add()">增加</button> -->
		<ul id="treeDemo" class="ztree"></ul>
    </ul>
	</div>
	<div id="details">
		<table>
			<tbody>
				<tr>
					<td>1</td>
					<td>Place A</td>
					<td>89</td>
					<td>No. 17, Taoyuan Road, layer 3, 1201</td>
					<td>张三</td>
					<td>13834599847</td>
					<td>九龙区</td>
				</tr>
				<tr>
					<td>2</td>
					<td>Place A</td>
					<td>89</td>
					<td>No. 17, Taoyuan Road, layer 3, 1201</td>
					<td>张三</td>
					<td>13834599847</td>
					<td>九龙区</td>
				</tr>
			</tbody>
			<thead>
				<tr>
					<td colspan="5" style="text-align:left;line-height: 40px;border-right: 0px;font-weight: bold;padding-left: 30px;">
						<script>document.write(language.weihu_zuzhi)</script><input type="text" placeholder="search" style="padding: 5px;margin-left: 20px;border-radius: 4px;border:1px solid #ccc;" /></td>
					<td colspan="3" style="text-align:right;line-height: 40px;border-left: 0px;"><button onclick="add()">increase</button></td>
				</tr>
				<tr style="background: #f5f5f5;">
					<th style="width: 5%;"><script>document.write(language.order_number)</script></th>
					<th style="width: 10%;"><script>document.write(language.Place_name)</script></th>
					<th style="width: 10%;"><script>document.write(language.acreage)</script>(m³)</th>
					<th style="width: 15%;"><script>document.write(language.address)</script></th>
					<th style="width: 10%;"><script>document.write(language.Person_in_charge)</script></th>
					<th style="width: 10%;"><script>document.write(language.Person_in_charge_tel)</script></th>
					<th style="width: 10%;"><script>document.write(language.Superior_organization)</script></th>
				</tr>
			</thead>
		</table>
	</div>


	<div class="k-overlay"></div>

	<div class="content">
		<table style="border-spacing:0px;">
			<thead>
				<tr>
					<td colspan="2" style="text-align:left;line-height: 40px;font-weight: bold;padding-left: 30px;">Newly added</td>
					<td colspan="2" style="text-align:right;line-height: 40px;"><button onclick='$(".k-overlay,.content").css("display","none");' style="border:0px;margin:0px;">X</button></td>
				</tr>
			</thead>
			<tbody>
                <tr style="line-height: 10px;"><td colspan="4">&nbsp;</td></tr>
				<tr>
                	<td><script>document.write(language.Place_name)</script>:</td><td><input type="text" placeholder="place" /></td>
                	<td><script>document.write(language.Person_in_charge)</script>:</td><td><input type="text" placeholder="name" /></td>
            	</tr>
				<tr>
                	<td><script>document.write(language.Person_in_charge_tel)</script>:</td><td><input type="text" placeholder="12345678999" /></td>
                	<td><script>document.write(language.Superior_organization)</script>:</td><td><select style="width: 150px;height: 30px;"><option>九龙区</option></select></td>
                </tr>
				<tr>
                	<td><script>document.write(language.acreage)</script>(m³):</td><td><input type="text" value="area" /></td>
                	<td><script>document.write(language.address)</script>:</td><td><input type="text" value="address" /></td>
                </tr>
                <tr style="line-height: 10px;"><td colspan="4">&nbsp;</td></tr>
			</tbody>
			<tfoot>
                <tr style="line-height: 10px;"><td style="border-top: 1px solid #ccc;" colspan="4">&nbsp;</td></tr>
				<tr>
					<td></td>
					<td colspan="3" style="text-align: right;">
						<button onclick='$(".k-overlay,.content").css("display","none");'>cancel</button>
						<button onclick='save()'>save</button>
					</td>
				</tr>
                <tr style="line-height: 10px;"><td colspan="4">&nbsp;</td></tr>
			</tfoot>
		</table>
	</div>
</body>
</html>